<template>
  <div class="app-container home">
    <div class="factor-container">
      <div class="box-1">
        <div class="box-header">
          <div class="icon">
            <el-icon :size="26" color="white"><Compass /></el-icon>
          </div>
          <label>正常因子</label>
          <div class="operate-div">
            <div style="width: 20px; height: 20px; margin: auto;">
              <el-icon :size="20" color="white"><MoreFilled /></el-icon>
            </div>
          </div>
          <div class="number-text">
            <span>14</span>
          </div>
        </div>
      </div>
      <div class="box-2">
        <div class="box-header">
          <div class="icon">
            <el-icon :size="26" color="#E5E5E5"><WarnTriangleFilled /></el-icon>
          </div>
          <label>告警因子</label>
          <div class="operate-div">
            <div style="width: 20px; height: 20px; margin: auto;">
              <el-icon :size="20" color="white"><MoreFilled /></el-icon>
            </div>
          </div>
          <div class="number-text">
            <span>2</span>
          </div>
        </div>
      </div>
      <div class="box-3">
        <div class="box-header">
          <div class="icon">
            <el-icon :size="26" color="#E5E5E5"><Refresh /></el-icon>
          </div>
          <label>离线因子</label>
          <div class="operate-div">
            <div style="width: 20px; height: 20px; margin: auto;">
              <el-icon :size="20" color="white"><MoreFilled /></el-icon>
            </div>
          </div>
          <div class="number-text">
            <span>2</span>
          </div>
        </div>
      </div>
      <div class="box-4">
        <div class="box-header">
          <div class="icon">
            <el-icon :size="26" color="#E5E5E5"><Odometer /></el-icon>
          </div>
          <label>全部因子</label>
          <div class="operate-div">
            <div style="width: 20px; height: 20px; margin: auto;">
              <el-icon :size="20" color="white"><MoreFilled /></el-icon>
            </div>
          </div>
          <div class="number-text">
            <span>18</span>
          </div>
        </div>
      </div>
    </div>

    <div class="card-container">
      <el-tabs type="border-card">
        <el-tab-pane label="123">
          <div class="device-main-container">
            <div v-for="item in deviceList">
              <Device :device-name=item.name :device-status=item.status :device-description="item.description"></Device>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="456">456</el-tab-pane>
        <el-tab-pane label="test">test</el-tab-pane>
        <el-tab-pane label="test">test</el-tab-pane>
      </el-tabs>
    </div>

  </div>
</template>

<script setup name="Index">
import {Compass, MoreFilled, Odometer, Position, Refresh, WarnTriangleFilled} from "@element-plus/icons-vue";

import Device from '@/components/Device'

const version = ref('3.8.7')

const deviceList = ref([
  {
    name: '7-6-R光照65535',
    status: '异常',
    description: '146 Lux'
  },
  {
    name: '5-3-RK烟感',
    status: '正常',
    description: '正常'
  },
  {
    name: '6-3-RK红外',
    status: '正常',
    description: '正常'
  },
  {
    name: '空调控制器湿度',
    status: '正常',
    description: '26.7℃'
  },
  {
    name: '第一路电流',
    status: '正常',
    description: '0.0 mA'
  },
  {
    name: '第二路电流',
    status: '正常',
    description: '0.0 mA'
  },
  {
    name: '5-3-RK烟感',
    status: '正常',
    description: '26.7℃'
  },
  {
    name: '',
    status: '正常',
    description: '关机'
  },
  {
    name: '控制开关1',
    status: '正常',
    description: '闭合'
  },
  {
    name: '控制开关2',
    status: '正常',
    description: '断开'
  },
  {
    name: '控制开关3',
    status: '正常',
    description: '断开'
  },
  {
    name: '控制开关4',
    status: '正常',
    description: '断开'
  },
  {
    name: '空调制热',
    status: '正常',
    description: ''
  },
  {
    name: '空调制冷',
    status: '正常',
    description: ''
  }
])

function goTarget(url) {
  window.open(url, '__blank')
}





</script>

<style scoped lang="scss">

.box-1, .box-2, .box-3, .box-4 {
  border-radius: 10px;
  border: 1px solid #3951E3;
  position: relative;

  .box-header {
    width: 100%;
    height: 10px;
    background-color: white;
    border-radius: 10px 10px 0 0;
    position: relative;

    .icon {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      top: 38px;
      left: 36px;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;

    }

    label {
      color: #979797;
      font-size: 25px;
      font-weight: 20;
      position: absolute;
      top: 40px;
      left: 108px;
    }

    .operate-div {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background-color: rgba(57, 81, 227, 37%);
      position: absolute;
      top: 22px;
      right: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .number-text {
      line-height: 30px;
      width: 30px;
      height: 30px;
      position: absolute;
      top: 81px;
      right: 60px;

      span {
        font-size: 49px;
      }
    }
  }

}

.box-1 {
  .box-header {
    background-color: rgb(27, 157, 112);
    .icon {
      background-color: rgb(27, 157, 112);
    }

    .number-text {
      span {
        color: rgb(27, 157, 112);
      }
    }
  }
}

.box-2 {
  .box-header {
    background-color: #A13348;
    .icon {
      background-color: #A13348;
    }
    .number-text {
      span {
        color: #A13348;
      }
    }
  }
}

.box-3 {
  .box-header {
    background-color: #979797;
    .icon {
      background-color: #979797;
    }
    .number-text {
      span {
        color: #979797;
      }
    }
  }
}

.box-4 {
  .box-header {
    background-color: #3951E3;
    .icon {
      background-color: #3951E3;
    }
    .number-text {
      span {
        color: #3951E3;
      }
    }
  }
}

:deep(.el-tabs__content) {
  height: calc(100vh * (520 / 980));
  padding: 0;
}

.device-main-container {
  margin: 31px 238px 47px 32px;
  height: calc(100vh * (480 / 980));
  width: calc(100% - 260px);
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto auto;
  grid-gap: 35px 20px;
  //grid-template-rows: calc(100vh * (222 / 980));
  grid-auto-rows: minmax(calc(100vh * (222 / 980)), calc(100vh * (222 / 980)));
  overflow-y: auto;

}

.device-icon {
  display: inline-block;
  position: absolute;
  left: 50%;
  top: calc(100% * (28 / 222));
  transform: translateX(-50%);

  img {
    width: 76px;
    height: 76px;
  }
}

.device-status {
  font-size: 18px;
  color: #3951E3;
  position: absolute;
  left: 50%;
  top: calc(100% * (130 / 222));
  transform: translateX(-50%);
  font-family: PingFangSC-Regular, sans-serif;
}

.device-name {
  font-size: 14px;
  color: #3951E3;
  position: absolute;
  left: 50%;
  top: calc(100% * (165 / 222));
  transform: translateX(-50%);
  font-family: PingFangSC-Regular, sans-serif;
  width: 100%;
  text-align: center;
}

.home {
  margin: 24px 24px 0 24px;
  //padding: -20px;
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }


  .factor-container {
    height: calc(100vh * (150 / 980));
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 12px;
  }

  .card-container {
    margin-top: 24px;
    //height: 600px;

    .el-tabs--border-card {
      height: 100%;
    }
  }
}
</style>

